import { Flex, Tag, Typography } from "antd"
import { ColumnGroupType, ColumnType } from "antd/es/table"

import { SaveButton } from "@/components/common/saveButton"
import { useDigital, useLocale } from "@/hooks"

const useColumns = () => {
	const { newFormat } = useLocale()
	const { renderFormat, renderColor } = useDigital()
	const changeId = {
		dataIndex: "eventId",
		title: newFormat("title.changeId"),
		align: "center",
		width: 280,
		fixed: true,
		render: (_text: any, record: any) => {
			return (
				<Flex align="center" gap={5} justify="center">
					<Typography>{record.eventId}</Typography>
					<SaveButton value={record.eventId} />
				</Flex>
			)
		}
	}
	const extensionB = {
		dataIndex: "extensionB",
		title: newFormat("label.extensionB"),
		align: "center",
		width: 200
	}
	const merchantName = {
		dataIndex: "merchantName",
		title: newFormat("label.merchantName"),
		align: "center",
		width: 120
	}
	const memberName = {
		dataIndex: "userName",
		title: newFormat("label.memberName"),
		align: "center",
		width: 200,
		render: (_text: any, record: any) => {
			return (
				<Flex align="center" gap={5} justify="center">
					<Typography>{record.userName}</Typography>
					<SaveButton value={record.userName} />
				</Flex>
			)
		}
	}
	const venueName = {
		dataIndex: "venueName",
		title: newFormat("title.venueName"),
		align: "center",
		width: 120
	}
	const walletTypeStr = {
		dataIndex: "walletTypeStr",
		title: newFormat("label.walletType"),
		align: "center",
		width: 120
	}
	const bizTypeStr = {
		dataIndex: "bizTypeStr",
		title: newFormat("label.businessType"),
		align: "center",
		width: 120
	}
	const changeTypeStr = {
		dataIndex: "changeTypeStr",
		title: newFormat("label.changeType"),
		align: "center",
		width: 120
	}
	const transTypeStr = {
		dataIndex: "transTypeStr",
		title: newFormat("label.transType"),
		align: "center",
		width: 120
	}
	const changeBefore = {
		dataIndex: "changeBefore",
		title: newFormat("title.change.before"),
		align: "center",
		width: 200,
		render: renderFormat
	}
	const changeAmount = {
		dataIndex: "amount",
		title: newFormat("title.change.amount"),
		align: "center",
		width: 200,
		render: renderColor
	}
	const changeAfter = {
		dataIndex: "changeAfter",
		title: newFormat("title.change.after"),
		align: "center",
		width: 200,
		render: renderFormat
	}
	const recordTime = {
		dataIndex: "eventTime",
		title: newFormat("title.change.time"),
		align: "center",
		width: 200
	}
	const remark = {
		dataIndex: "remark",
		title: newFormat("common.remarks"),
		align: "center",
		width: 120
	}
	const member_accountStatus = {
		//账号状态
		dataIndex: "accountStatus",
		key: "accountStatus",
		title: newFormat({ id: "label.member.account_status" }),
		titleText: newFormat({ id: "label.member.account_status" }),
		sortable: false,
		align: "center",
		width: 200,
		fixed: false,
		render: (_text: any, record: any) => {
			const statusArr = []
			if (record.accountLockStatus)
				statusArr.push({
					context: newFormat({ id: "label.account_lock_status" }),
					color: "gold"
				})
			if (record.loginLockStatus) {
				statusArr.push({
					color: "volcano",
					context: newFormat({ id: "label.login_lock_status" })
				})
			}
			if (record.gameLockStatus)
				statusArr.push({
					context: newFormat({ id: "label.game_lock_status" }),
					color: "geekblue"
				})
			if (statusArr.length === 0)
				statusArr.push({
					context: newFormat({ id: "label.account_status_normal" }),
					color: "green"
				})

			return (
				<Flex vertical gap={10}>
					{statusArr.map(item => {
						return (
							<Tag color={item.color} key={item.context + record.id} style={{ textAlign: "center" }}>
								{item.context}
							</Tag>
						)
					})}
				</Flex>
			)
		}
	}
	return {
		changeId,
		extensionB,
		memberName,
		merchantName,
		member_accountStatus,
		venueName,
		walletTypeStr,
		bizTypeStr,
		changeTypeStr,
		transTypeStr,
		changeBefore,
		changeAmount,
		changeAfter,
		recordTime,
		remark
	} as Record<string, ColumnGroupType<any> | ColumnType<any>>
}
export default useColumns
